import { HsAdminTable } from '@hs-admin/base-components'
import { EMPTYTEXT } from '@hs-admin/utils'
import { Button, Descriptions, Flex, Modal, Popover, Typography } from 'antd'
import { openCompanyDetail } from 'hs-react-company'
import { useState } from 'react'

const { Text } = Typography

const useShowDetail = () => {
  const [isModalOpen, setisModalOpen] = useState(false)
  const [selectedItem, setselectedItem] = useState<any>({})
  const [detailList, setdetailList] = useState<any>([])

  return {
    Detail: (
      <Modal
        width={1200}
        title={<div className="text-18px">数据详情</div>}
        open={isModalOpen}
        footer={null}
        onCancel={() => {
          setselectedItem({})
          setdetailList([])
          setisModalOpen(false)
        }}>
        {detailList.map((first: any) => (
          <Descriptions
            key={first.value}
            title={first.label === '默认分组' ? '' : first.label}
            bordered
            column={2}
            items={first.children.map((second: { label: any; key: string }, index: number) => ({
              key: index + 1,
              label: second.label,
              children: Array.isArray(selectedItem[second.key]) ? (
                showJsonb(second.key, selectedItem[second.key])
              ) : (
                <p className="max-w-120">{selectedItem[second.key] || EMPTYTEXT}</p>
              )
            }))}
            className="mt-8"
          />
        ))}
      </Modal>
    ),
    showModal: (record: any, fieldList: any) => {
      setselectedItem(record)
      setdetailList(fieldList)
      setisModalOpen(true)
    }
  }
}

const showJsonb = (key: string, list: any[]) => {
  const allColumns: any = {
    hs_ind_list: [
      { title: '一级分类', dataIndex: 'level_first' },
      { title: '二级分类', dataIndex: 'level_second' },
      { title: '三级分类', dataIndex: 'level_third' },
      { title: '四级分类', dataIndex: 'level_fourth' }
    ],
    nea_ind_list: [
      { title: '行业门类', dataIndex: 'level_first' },
      { title: '行业大类', dataIndex: 'level_second' },
      { title: '行业中类', dataIndex: 'level_third' },
      { title: '行业细类', dataIndex: 'level_fourth' }
    ],
    strategic_ind_list: [
      { title: '一级分类', dataIndex: 'level_first' },
      { title: '二级分类', dataIndex: 'level_second' },
      { title: '三级分类', dataIndex: 'level_third' },
      { title: '四级分类', dataIndex: 'level_fourth' }
    ]
  }
  // 所属载体信息
  const carrier_list_items: any[] = []
  if (key === 'carrier_list') {
    list.forEach((item: { type: any; carrier_level: any; carrier_name: any }) => {
      carrier_list_items.push({ key: '1', label: '载体类型', children: <span>{item.type || EMPTYTEXT}</span> })
      carrier_list_items.push({
        key: '2',
        label: '载体级别',
        children: <span>{item.carrier_level || EMPTYTEXT}</span>
      })
      carrier_list_items.push({ key: '3', label: '载体名称', children: <span>{item.carrier_name || EMPTYTEXT}</span>, span: 3 })
    })
  }
  // 机构信息
  const org_info_list_items: any[] = []
  if (key === 'org_info_list') {
    list.forEach((item: any) => {
      org_info_list_items.push({ key: '1', label: '机构类型', children: <span>{item.entity_type || EMPTYTEXT}</span> })
      org_info_list_items.push({
        key: '2',
        label: '机构名称',
        children: (
          <Button type="link" onClick={() => openCompanyDetail(item.company_code)}>
            {item.company_name}
          </Button>
        )
      })
      org_info_list_items.push({
        key: '3',
        label: '所在区域',
        children: (
          <span>
            {item.province}
            {item.city}
            {item.area}
          </span>
        ),
        span: 3
      })
    })
  }
  const textStyle = {
    maxWidth: 420
  }

  return (
    <Flex align="center" gap={'small'}>
      {['hs_ind_list', 'nea_ind_list', 'strategic_ind_list'].includes(key) && (
        <Popover
          content={
            <HsAdminTable columns={allColumns[key]} dataSource={list} resizeable={false} pagination={false} scroll={{ y: 600 }} className="w-160" />
          }
          title=""
          trigger={'click'}>
          <Text className="cursor-pointer text-#0779ff" style={textStyle} ellipsis={{ tooltip: true }}>
            {[...new Set(list.map((item: { level_first: any }) => item.level_first))].join('、')}
          </Text>
        </Popover>
      )}
      {key === 'carrier_list' && (
        <Popover content={<Descriptions title="" bordered column={2} items={carrier_list_items} />} title="" trigger={'click'}>
          <Text className="cursor-pointer text-#0779ff" ellipsis={{ tooltip: true }}>
            {list.map((item: { carrier_name: any }) => item.carrier_name).join('、')}
          </Text>
        </Popover>
      )}
      {key === 'qualified_list' && (
        <Popover
          content={
            <>
              {list.map((item: any) => (
                <p key={item.name}>{item.name}</p>
              ))}
            </>
          }
          title=""
          trigger={'click'}>
          <Text className="cursor-pointer text-#0779ff" ellipsis={{ tooltip: true }}>
            {list.map((item: { name: any }) => item.name).join('、')}
          </Text>
        </Popover>
      )}
      {key === 'org_info_list' && (
        <Popover content={<Descriptions title="" bordered column={2} items={org_info_list_items} />} title="" trigger={'click'}>
          <Text className="cursor-pointer text-#0779ff" ellipsis={{ tooltip: true }}>
            {list.map((item: { company_name: any }) => item.company_name).join('、')}
          </Text>
        </Popover>
      )}
    </Flex>
  )
}

export default useShowDetail
